<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<script>
    function previewImage(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('imagePreview').src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
<head>
    <meta charset="UTF-8">
    <title>编辑商品</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/admin.css">
</head>
<body>
<div class="container">
    <h1>编辑商品</h1>

    <c:if test="${not empty requestScope.error}">
        <div class="alert error">${requestScope.error}</div>
    </c:if>

    <form action="${pageContext.request.contextPath}/admin/products/edit" method="post" enctype="multipart/form-data">
        <input type="hidden" name="id" value="${requestScope.product.productId}">
        <!-- 修复2: 添加原始图片隐藏字段 -->
        <input type="hidden" name="originalImage" value="${requestScope.product.image}">

        <div class="form-group">
            <label for="name">商品名称</label>
            <input type="text" id="name" name="name" value="${requestScope.product.name}" required>
        </div>

        <div class="form-group">
            <label for="price">价格</label>
            <input type="number" id="price" name="price" step="0.01" min="0" value="${requestScope.product.price}" required>
        </div>

        <div class="form-group">
            <label for="stock">库存</label>
            <input type="number" id="stock" name="stock" min="0" value="${requestScope.product.stock}" required>
        </div>

        <div class="form-group">
            <label for="description">描述</label>
            <textarea id="description" name="description">${requestScope.product.description}</textarea>
        </div>

        <div class="form-group">
            <label>商品图片：</label>
            <input type="file" name="image" accept="image/*" onchange="previewImage(this)">

            <div class="img-preview">
                <c:choose>
                    <c:when test="${not empty requestScope.product.image}">
                        <!-- 修复4: 使用正确的图片路径 -->
                        <img id="imagePreview" src="${pageContext.request.contextPath}/uploads/${requestScope.product.image}" style="max-width:100%; max-height:100%;" alt="">
                        <p id="noImageText" style="display:none; text-align:center; margin-top:50px;">暂无图片</p>
                    </c:when>
                    <c:otherwise>
                        <img id="imagePreview" src="" style="max-width:100%; max-height:100%; display:none;" alt="">
                        <p id="noImageText" style="text-align:center; margin-top:50px;">暂无图片</p>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn">更新</button>
            <a href="${pageContext.request.contextPath}/admin/products" class="btn cancel">取消</a>
        </div>
    </form>
</div>
</body>
</html>